How To Add Social Media Icons In WordPress Without A Plugin?

September 3rd, 2016 | by Ravi Chahar || 4 Comments |

Most of the people use the plugins to add social media icons on their website. Are you also one of them? Are you using any plugin and increasing the plugin number? Are you seeking how to add social media icons in WordPress without a plugin?

Well, this can be done using a simple HTML code. You may be thinking how is it possible? In this post, I am going to show you to add social media icons of any color, any type.

You would decide the look of the media icons.

Add Social Media Icons in WordPress Without A Plugin.

As you may have seen that people provide a bunch of the codes to add in the functions.php file of your website. But it won’t be the perfect solution because the code provided by many developers isn’t responsive and can increase the page loading time.

Here, you will use the images to create the social media icons. It will give you the freedom to create the icons of your choice. Are you surprised?

There is nothing to get surprised. I am going to provide the HTML code which can help you.

Step 1:- Choose the icon images from anywhere you want. If you want then you can create the images using any tool. It’s important to match the color combination with the layout of your website.

Step 2:- Upload all the images of the icons in WordPress media library. Just go for media>>add new for all the icons.

Step 3:- After uploading, you would notice the URL of the images which is stored in WordPress. This URL will be used in the further process to connect these icons and to show them anywhere in your website.

Step 4:- Link the images with the URL of your social networking profiles. Here we are making the image as the links to reach to your social networking profiles.

Step 5:- The HTML code is here:

In this code replace the profile URL from your social networking profiles. As I have shown that in place of the “Twitter Profile URL” you have to add the URL of the profile you have on Twitter so that the when people click on the image then they can reach to your profile.

The icon URL is the URL of the images you have uploaded in WordPress library. Copy the URL of the images and paste it along with each social networking profile.

Step 6:- Now put the HTML code in the text box in the widgets area of WordPress and place the text box where you want to show the icons.

After adding all the URLs,the images will be showing combined. So you will need to a little bit of CSS code.

Step 7:- As you can see that all the images are give one class=”sb”. You have to target that class to separate the icons.

Place this code in the style.css file of your theme. The value of the margin will vary according to the size of the icons and the width of the layout.

You can add social media icons in WordPress without a plugin in the footer area or the sidebar of your website.

It will depend on the theme you are using.

Can You Now Add Social Media Icons In WordPress Without A Plugin?

There are many people who dwell into the codes to create the social icons and fret a lot. It seems a kind of complicated to add social media icons in WordPress without a plugin.

But as you can see that HTML has done the job and the CSS played its part. You can add any an image in WordPress sidebar using HTML.

You can create horizontal form using CSS. Both the languages can help you a lot. If you face any problem while adding the icons then feel free to ask.